<div class="section" [ngClass]="{'video-list-bg': tagData.name === 'videoListH'}" [ngStyle]="tagData.cssStyle | styleFilter">
  <ng-container *ngIf="tagData.name === 'videoListH'; else elseTemplate">
    <ng-container *ngIf="tagData.headDiv">
      <div class="video-h-head">
        <p class="title" [ngStyle]="tagData.headDiv.title.cssStyle | styleFilter" >{{tagData.headDiv.title.label}} <span class="sub-title" *ngIf="tagData.headDiv.sloganSecondRow?.label" [ngStyle]="tagData.headDiv.sloganSecondRow.cssStyle | styleFilter">{{tagData.headDiv.sloganSecondRow.label}}</span></p>
        <p class="more-link" appDebounceClick (debounceClick)="handleClick(tagData.headDiv.moreLink.link)" *ngIf="tagData.headDiv.moreLink?.link?.label">{{tagData.headDiv.moreLink.link.label}} <img class="icon" *ngIf="tagData.headDiv.moreLink.iconUrl && tagData.headDiv.moreLink.iconUrl.length > 0" src="{{tagData.headDiv.moreLink.iconUrl}}" alt=""> </p>
      </div>

    </ng-container>
    
    <div class="video-h-bg">
      <div class="video-h"
      *ngFor="let item of tagData['data']"
      appDebounceClick (debounceClick)="handleClick(item.link)"
    >
      <img class="play-h" src="assets/icon/video_icon_paly@3x.png" />
      <img class="video-img" src="{{ item.image }}" />
      <p class="video-label">{{ item.label }}</p>
    </div>
    </div>
    
  </ng-container>
  <ng-template #elseTemplate>
    <div
    class="video"
    *ngFor="let item of tagData['data']"
    appDebounceClick (debounceClick)="handleClick(item.link)"
  >
    <img class="play" src="assets/icon/video_icon_paly@3x.png" />
    <img class="video-bgImg" src="{{ item.image }}" />
    <span class="video-span">{{ item.label }}</span>
  </div>
  </ng-template>
  
  
</div>
